import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true, color: '#235fa7' })
  const titleWidth = 80
  const cx = board.centerX
  const cy = board.centerY
  const pointStr1 =
    `${cx - titleWidth},28 ${cx - titleWidth + 20},5 ${cx + titleWidth - 20},5 ${cx + titleWidth},28 ` +
    `${cx + titleWidth - 20},51 ${cx - titleWidth + 20},51`
  const pointStr2 =
    `${cx - titleWidth},28 24,28 5,51 5,${cy - 35} 12,${cy - 30} 12,${cy + 45} ` +
    `5,${cy + 50} 5,-24 24,-5 -24,-5 -5,-24 -5,${cy + 50} -12,${cy + 45} -12,${cy - 30} -5,${cy - 35} ` +
    `-5,51 -24,28 ${cx + titleWidth},28`
  const pointStr3 = `5,${cy - 30} 9,${cy - 27} 9,${cy + 42} 5,${cy + 45}`
  const pointStr4 = `-5,${cy - 30} -9,${cy - 27} -9,${cy + 42} -5,${cy + 45}`
  const pointStr5 =
    `${cx - titleWidth + 7},28 ${cx - titleWidth + 23},9 ${cx + titleWidth - 23},9 ${cx + titleWidth - 7},28 ` +
    `${cx + titleWidth - 23},47 ${cx - titleWidth + 23},47`
  const paths = [
    { points: pointStr1, fill: false, close: true },
    { points: pointStr2, fill: false, close: false },
    { points: pointStr3, fill: true, close: true },
    { points: pointStr4, fill: true, close: true },
    { points: pointStr5, fill: false, close: true }
  ]
  for (let i = 0; i < paths.length; i++) {
    const ps = paths[i].points.split(' ').map((item) => item.split(','))
    let graph = null
    if (paths[i].fill) graph = new GraphBack.Polygon({ points: GraphBack.Convert(board, ps), close: paths[i].close })
    else graph = new GraphBack.Polyline({ points: GraphBack.Convert(board, ps), close: paths[i].close })
    board.add(graph)
  }
  const rect1 = new GraphBack.Rect({ x: cx - titleWidth - 30, y: 36, width: 25, height: 10, skewX: 0.8 })
  const transform1 = new GraphBack.Transform(rect1).array(3, -30, 0).alpha(0.3, true)
  board.add(transform1)
  const rect2 = new GraphBack.Rect({ x: cx + titleWidth + 5, y: 36, width: 25, height: 10, skewX: -0.8 })
  const transform2 = new GraphBack.Transform(rect2).array(3, 30, 0).alpha(0.3, true)
  board.add(transform2)
  board.render()
}
